<template>
  <div>
    <van-checkbox v-model="checked" @click="show">
      <!-- 自定义是否到场图标 -->
      <img
      slot="icon"
      slot-scope="props"
      :src="props.checked ? icon.active : icon.normal"
      >
      </van-checkbox>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'ariveIcon',
  // 父组件player.vue传递过来的 未到场球员Info ( name:名字 + Number (号码))
  props: ['AbsentInfo'],

  data () {
    return {
      checked: true,
      icon: {
        normal: require('@/images/serve/team/unarive.png'),
        active: require('@/images/serve/team/arive.png')
      }
    }
  },
  computed: {
    ...mapState(['Absent_players'])
  },
  methods: {

    show() {
      // console.log('成功')
      // console.log(this.AbsentInfo)
      if (this.checked === false) {
        // 将player组件传递过来的 未到场队员姓名 与号码传递给 vuex 中的 Absent_players数组中
        // （一队 or 二队）
        this.$store.commit('Absent_players_function', this.AbsentInfo)
      }
    }
  }
}
</script>

<style scoped>
  ::v-deep .van-checkbox__icon{
    height: 100%;
  }
  .van-checkbox img{
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    width: 60%;
  }
</style>
